<template>
  <div>
    <el-upload
      action="#"
      list-type="picture-card"
      :http-request="uploadImg"
      :on-remove="removeImg"
      :class="{disable: imgUrl}"
      :file-list="fileList"
    >
      <!-- file-list 用于默认图片的回显 -->
      <!-- :class="{disable: imgUrl}" 控制上传按钮的显示隐藏 -->
      <i class="el-icon-plus" />
    </el-upload>
    <el-progress v-show="percent>0&&percent<100" :percentage="percent" />
  </div>
</template>

<script>
// 实例化 cos服务
import COS from 'cos-js-sdk-v5'
// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKID1wrfLq7RXS9arvoUyRtEMI2XP5WloeIi',
  SecretKey: 'GJMH3e5JIdkcHl392f7MOBuUt5ziFYeW'
})
export default {
  data() {
    return {
      imgUrl: '',
      // imgUrl: 'http://hr-82-1259170259.cos.ap-guangzhou.myqcloud.com/1667551620617',
      percent: 0
    }
  },
  computed: {
    // 解决上传图片闪动的问题
    // 利用计算属性的缓存作用
    fileList() {
      return this.imgUrl ? [{ url: this.imgUrl }] : []
    }
  },
  methods: {
    // 保存图片
    uploadImg(file) {
    // 自定义上传图片
      // file就是选中的文件对象 其中有一个file属性 就是要传递给后端的文件对象
      // console.log(77, file)
      // 调用腾讯云提供的云服务

      this.imgUrl = file.file // 为了能让上传按钮立刻消失 隐藏需要加上这行代码 (优化视觉效果)
      cos.uploadFile({
        Bucket: 'hm-hr-1314769157', /* 储存桶名字，必须字段 */
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
        Key: Date.now().toString(), /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
        Body: file.file, // 上传文件对象
        SliceSize: 1024 * 1024 * 5, /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */
        onProgress: (progressData) => {
          console.log(JSON.stringify(progressData))
          this.percent = progressData.percent * 100
        }
      }, (err, data) => {
        if (err) {
          console.log('上传失败', err)
          this.imgUrl = '' // 上传失败 清空图片地址
        } else {
          console.log('上传成功', this)
          this.imgUrl = 'http://' + data.Location
          //   console.log(69, this.imgUrl)
          this.$emit('upImg', this.imgUrl)
        }
      })
    },
    // 移除图片
    removeImg() {
      this.imgUrl = ''
    }
  }
}
</script>

<style lang='scss' scoped>
  .disable{
    ::v-deep .el-upload--picture-card{
      display: none;
    }
  }
  .el-progress{
    width: 188px;
  }
</style>
